<template>
    <div class="bg">
        <nav-com title="业务经理" :showView='showView' @back="backHandler()"></nav-com>
        <van-pull-refresh v-model = 'isLoading' @refresh='onRefresh'>
        <div v-if="list.length==0" class="empty">
            <img src='../../assets/t4.png'>
            <p>您还没有业务经理记录哦~</p>
        </div>
        <ul class="teamlist">
            <van-list v-model="loading" :finished="finished" @load="onload">
            <li v-for="(item,index) in list" :key="index">
                <div class="teamlist_title">{{item.createdAt | formatDate}}</div>
                <div class="teamlist_bottom">
                    <p>{{item.cellphone}}({{item.roleLevel | userRoleLevel}})</p>
                    <span v-if="item.parentUserId > 0" style="color:green;">已归属</span>
                    <span v-if="item.parentUserId == 0" style="color:red;">未归属</span>
                </div>
            </li>
            </van-list>
        </ul>
        </van-pull-refresh>
    </div>
</template>
<script>
import {getFttusers}  from '@/api/api'
import navCom from '@/component/nav'
export default {
    name:'referralChildCountHandler',
    components:{
        navCom
    },
    data() {
        return {
            showView:true,
            uid: weixin.getUserId(),
            list:[],
            isLoading:false,
            loading:true,
            finished:false,
            total:0,
            pageNo:1,
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        onRefresh(){
            this.list = []
            this.pageNo = 1
            this.init()
            this.isLoading = false
        },
        //数据加载
        onload(){
            this.init()
        },
        //初始化团队奖励
        init(){
            getFttusers({referralParentUserId:this.uid,pageNo:this.pageNo}).then(res=>{
                if(res.data.code == 200){
                    this.pageNo++
                    this.list = this.list.concat(res.data.data.rows)
                    this.total = res.data.data.total
                    if(this.list.length < 1 ){
                        this.finished = true
                    }else if(this.list.length >= this.total){
                        this.finished = true
                    }else {
                        this.finished = false
                        this.loading = false
                    }
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        }
    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.bg {background: #F1F3F6; min-height: 100vh;}
.teamlist {margin:0 4vw; height:auto; overflow: hidden;}
.teamlist li {background: #fff;  margin-top:4vw; height:auto; overflow: hidden;}
.teamlist_title {padding-left:4vw; border-radius: 1.3vw; border-bottom: 1px solid #e8e8e8; color:#999; height:8vw; line-height:8vw;}
.teamlist_bottom {display: flex; justify-content: space-between; height:12vw; line-height: 12vw;}
.teamlist_bottom p {padding-left:4vw;  color:#333;}
.teamlist_bottom span {padding-right:4vw; color:#FF0000;}
.empty {padding-top:29.33vw; text-align: center;}
.empty img {width:54.4vw; height:37.6vw;}
.empty p {font-size:3vw; color:#333; margin-top:4vw;}
</style>